<template>
  <div style="width: 50%" class="card">
    <el-form ref="user" :model="data.user" label-width="70px" style="padding: 20px">
      <el-form-item prop="avatar" label="头像">
        <el-upload
            :action="baseUrl + '/files/upload'"
            :on-success="handleFileUpload"
            :show-file-list="false"
            class="avatar-uploader"
        >
          <img v-if="data.user.avatar" :src="data.user.avatar" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item prop="username" label="用户ID">
        <el-input disabled v-model="data.user.id" placeholder="请输入用户ID"></el-input>
      </el-form-item>
      <el-form-item prop="username" label="用户名">
        <el-input disabled v-model="data.user.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="name" label="姓名">
        <el-input v-model="data.user.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item prop="phone" label="电话">
        <el-input v-model="data.user.phone" placeholder="请输入电话"></el-input>
      </el-form-item>
      <el-form-item prop="email" label="邮箱">
        <el-input v-model="data.user.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>

      <div style="text-align: center">
        <el-button type="primary" @click="update">保 存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import request from "@/utils/request.js";
import { ElMessage } from "element-plus";
import {Plus} from "@element-plus/icons-vue";

const baseUrl = import.meta.env.VITE_BASE_URL;
const uploadParams = reactive({
  bucket: "green", // Bucket name is fixed
  objectName: "Avatar", // Object name is fixed
});
const data = reactive({
  user: JSON.parse(localStorage.getItem('user') || '{}'),
  form: {
    img: '',  // 用于存储上传后的图片URL
    originalFileName: '', // 用于存储原始文件名
  },
  uploadParams: {
    bucket: "green", // Bucket name is fixed
    objectName: "Avatar", // Object name is fixed
  },
})

const isUploadVisible = ref(true); // 控制上传文件框是否可见

const handleAvatarClick = () => {
  isUploadVisible.value = true; // 显示上传框
};

const update = () => {
  if (data.form.img !== '') {
    data.user.avatar = data.form.img;
  }
  request.put('/user/update', data.user).then(res => {
    if (res.code === '200') {
      ElMessage.success('保存成功');
      localStorage.setItem('user', JSON.stringify(data.user));
      isUploadVisible.value = false; // 隐藏上传框
    } else {
      ElMessage.error(res.msg);
    }
  });
}

const handleFileUpload = (response, file, fileList) => {
  data.form.img = response.data; // 保存返回的图片URL
  update()
  ElMessage.success('上传成功');
};

const beforeUpload = (file) => {
  const isImage = file.type.startsWith("image/");
  if (!isImage) {
    ElMessage.error("只能上传图片文件!");
  }
  return isImage;
};
</script>

<style>
.avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
  cursor: pointer; /* 鼠标悬停时显示可点击的样式 */
}
</style>
